

import React, { Component } from "react";
import type { ReactNode } from 'react'


interface iState {

}
export default class App extends Component {


    // 普通函数无法获取 this 但是可以被调用
    btn2() {
        console.log('btn2' + this);
    }

    // 可以获取 this
    btn3 = () => {
        console.log('btn3', this);
    }

    // 普通函数通过 this 调用可以正常使用 this
    btn4() {
        console.log('btn4', this);
    }

    // 可以获取 this
    btn5 = () => {
        console.log('btn5', this);
    }

    render() {

        return <>
            <div>
                <h1>父组件</h1>
                {/* 
                    1. 事件
                    2. 表单
                    3. 生命周期
                    4. axios
                 */}
                <button onClick={() => {
                    console.log('按钮1点击了' + this);
                }}>按钮1</button>
                <button onClick={this.btn2}>按钮2</button>
                <button onClick={this.btn3}>按钮3</button>
                <button onClick={() => {
                    this.btn4()
                }}>按钮4</button>
                <button onClick={() => {
                    this.btn5()
                }}>按钮5</button>

                <button onClick={function () {
                    // this 无法使用
                    console.log('btn6');
                }}>按钮6</button>



            </div>
        </>
    }

}